<script>
import {dictionaryRequest, uploadFile} from "../../../../util/js/globalRequestJs";
import {checkFileSize} from "../../../../util/js/utils";
import {edit} from "./editNoticeJs";

export default {
  name: "EditNotice",
  props: ["rowData"],
  data() {
    return {
      fileList: [],
      notice: {
        nuuid: '',
        title: '',
        context: '',
        type: '',
        status: '',
        priority: '',
        releaseTime: '',
        deadline: '',
        updateTime: '',
        annex: ''
      },
      types: [],
      statuses: []
    }
  },
  mounted() {
    this.getDictionary();
  },
  methods: {
    // 获取下拉选项数据
    getDictionary() {
      // 绑定数据
      this.notice = this.rowData;
      // 反序列化
      this.fileList = JSON.parse(this.rowData.annex);
      dictionaryRequest('notice', 'type').then(response => {
        this.types = response.data;
        this.notice.type = this.getStatusValue(this.types,this.rowData.type);
      }).catch(error => {
        this.$router.push('/framework/error')
        console.log(error);
      });
      dictionaryRequest('notice', 'status').then(response => {
        this.statuses = response.data;
        this.notice.status = this.getStatusValue(this.statuses,this.rowData.status);
      }).catch(error => {
        this.$router.push('/framework/error')
        console.log(error);
      })
    },
    // 辅助函数，根据label获取对应的value
    getStatusValue(data,label) {
      const status = data.find(item => item.label === label);
      return status ? status.value : label; // 如果找到对应的value则返回，否则返回原始label
    },
    // 上传文件
    uploadFile() {
      // 触发隐藏的文件选择器点击事件
      this.$refs.fileInput.click();
    },
    handleFileChange(event) {
      // 从事件中获取选择的文件
      const file = event.target.files[0];
      var name = file.name;

      if (!checkFileSize(file)) {
        this.$message.error('File size should be less than 1M, please upload again!');
        return;
      }

      let formData = new FormData();
      formData.append('file', file);
      // 发送请求到后端进行处理
      uploadFile(formData).then(res => {
        if (res.code === '200') {
          this.fileList.push({
            name: name,
            url: res.data
          });
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(err => {
        this.$router.push('/framework/error')
        console.log('系统出错了', err);
      })
    },
    // 移除文件
    removeFile(index) {
      this.fileList.splice(index, 1);
    },
    // 关闭弹窗
    closeDialog() {
      this.$emit('closeEdit');
    },
    // 提交编辑
    submitEdit(){
      this.notice.annex = JSON.stringify(this.fileList.map(item => ({ name: item.name, url: item.url })));
      edit(this.notice).then(res => {
        if (res.code === '200') {
          this.$message.success("修改成功!")
          this.closeDialog();
        }else{
          this.$message.error('出错了：'+res.msg)
        }
      }).catch(error => {
        this.$message.error('系统出错了！')
        console.log(error);
      })
    }
  }
}
</script>

<template>
  <div id="en-main-container" class="en-main-container">
    <div style="font-size: 20px;font-family: 正楷;text-align: center;margin-bottom: 20px;">
      编辑公告
    </div>
    <span v-if="false" v-model="notice.nuuid"></span>
    <div id="en-title-container" class="en-span-container">
      <span>标题：</span>
      <el-input
        placeholder="请输入内容"
        v-model="notice.title"
        size="small"
        clearable>
      </el-input>
    </div>
    <div id="en-attr-container">
      <div style="display: flex;">
        <div style="display: flex;" class="en-span-container">
          <span style="width: 89px;">公告类型：</span>
          <el-select v-model="notice.type" style="width: 200px"
                     slot="prepend" placeholder="请选择公告类型" size="small">
            <el-option
              v-for="option in types"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            ></el-option>
          </el-select>
        </div>
        <div style="display: flex;margin-left: 30px;" class="en-span-container">
          <span style="width: 89px;">优先级：</span>
          <el-select v-model="notice.priority" style="width: 200px"
                     slot="prepend" placeholder="优先级" size="small">
            <el-option label="一级" value="0"></el-option>
            <el-option label="二级" value="1"></el-option>
            <el-option label="三级" value="2"></el-option>
            <el-option label="四级" value="3"></el-option>
            <el-option label="五级" value="4"></el-option>
            <el-option label="六级" value="5"></el-option>
          </el-select>
        </div>
      </div>
      <div style="display: flex;">
        <div style="display: flex;" class="en-span-container">
          <span style="width: 89px;">过期时间：</span>
          <el-date-picker
            style="width: 200px; height: 32px;"
            v-model="notice.deadline"
            type="datetime"
            size="small"
            placeholder="选择过期时间">
          </el-date-picker>
        </div>
        <div style="display: flex;margin-left: 30px;" class="en-span-container">
          <span style="width: 89px;">发布时间：</span>
          <el-date-picker
            style="width: 200px; height: 32px;"
            v-model="notice.releaseTime"
            type="datetime"
            size="small"
            :disabled="true"
            placeholder="选择发布时间">
          </el-date-picker>
        </div>
      </div>
      <div style="display: flex;">
        <div style="display: flex;" class="en-span-container">
          <span style="width: 89px;">状态：</span>
          <el-select v-model="notice.status" style="width: 200px"
                     slot="prepend" placeholder="请选择公告状态" size="small">
            <el-option
              v-for="option in statuses"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            ></el-option>
          </el-select>
        </div>
        <div style="display: flex;margin-left: 30px;" class="en-span-container">
          <span style="width: 89px;">更新时间：</span>
          <el-date-picker
            style="width: 200px; height: 32px;"
            v-model="notice.updateTime"
            type="datetime"
            size="small"
            :disabled="true"
            placeholder="选择发布时间">
          </el-date-picker>
        </div>
      </div>
    </div>
    <div id="en-context-container" class="en-span-container">
      <span>内容：</span>
      <div style="width: 100%">
        <el-input
          type="textarea"
          placeholder="请输入内容"
          v-model="notice.context"
          :autosize="{ minRows: 6, maxRows: 6}"
          maxlength="200"
          show-word-limit>
        </el-input>
      </div>
    </div>
    <div id="en-upload-container" class="en-span-container">
      <span style="width: 89px">附件：</span>
      <div>
        <el-button @click="uploadFile" type="primary" size="small" plain>上传附件</el-button>
        <!-- 隐藏的文件选择器 -->
        <input ref="fileInput" type="file" style="display: none" @change="handleFileChange">
        <div slot="tip" class="el-upload__tip">只能上传doc/docx文件，且不超过1MB</div>
        <span v-for="(file,index) in fileList" :key="index"
              :style="{ fontSize: '12px', border: file.hover ? '1px solid #ccc' : 'none',
               backgroundColor: file.hover ? '#cccccc' : 'transparent' }"
              @mouseover="file.hover = true" @mouseout="file.hover = false">
          <i class="el-icon-tickets"></i>
          {{ file.name }}
          <a @click="removeFile(index)" style="margin-left: 50px;">
            <i class="el-icon-circle-close"></i></a>
          <br/>
        </span>
      </div>
    </div>
    <div id="en-submit-container" class="en-submit-container">
      <el-button type="primary" @click="closeDialog" style="width: 200px" size="small" plain>关闭</el-button>
      <el-button type="primary" @click="submitEdit" style="width: 200px" size="small" plain>提交</el-button>
    </div>
  </div>
</template>

<style scoped>
@import "editNoticeCss.css";
</style>
